<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css球体</title>
</head>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	html,
	body,
	.container,
	.box {
		height: 100%;
	}

	body {
		position: fixed;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.container,
	.box {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transform-style: preserve-3d;
	}

	.container {
		/* perspective-origin: 60% 30%; */
		perspective: 500px;
	}

	.box {
		animation: rotate 40s linear infinite;
		transform: rotateZ(23deg) rotateY(75deg);
	}

	.box>div {
		position: absolute;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-image: url('./earth_atmos_4096.jpg');
	}

	@keyframes rotate {
		0% {
			transform: rotateZ(23deg) rotateY(0deg);
		}

		100% {
			transform: rotateZ(23deg) rotateY(360deg);
		}
	}
</style>

<body>
	<div class="container">
		<div class="box"></div>
	</div>
	<script>
		function draw(deg) {
			var fragment = document.createDocumentFragment()
			var r = 180 // 赤道半径
			r *= Math.cos(deg * Math.PI * 2 / 360) // 对应纬度 圆半径
			var size = 30 // 填充圆直径 
			var len = r * 2 * Math.PI / size
			for (var i = 0; i < len; i++) {
				var div = document.createElement('div')
				div.style.transform = 'rotateY(' + ~~(360 / len * i) + 'deg) rotateX(' + deg + 'deg) translateZ(160px)'
				div.style.backgroundPosition = (100 * i / len) + '% -' + (deg + 90) / 180 * 100 + '%'
				fragment.appendChild(div)
			}
			document.querySelector('.box').appendChild(fragment)
		}
		window.onload = function () {
			for (var i = -90; i <= 90; i += 10) {
				draw(i)
			}
		}
	</script>
</body>

</html>